<template>
	<view>
		<view class="first">
			<view class="xuanhao">
				<text class="xuanhao-">
					xxx选号网
				</text>
			</view>
			<view class="kefu">
				<text class="kefu-">
					联系客服
				</text>
			</view>
		</view>

		<view class="lunbotu">
			<swiper class="lunbotu-" circular indicator-dots="true" autoplay="true">
				<swiper-item v-for="item in swipers">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="ssk">
			<view class="search">
				<input class="search-shuru" placeholder="商品编号或关键词或游戏名" v-model="search" placeholder-class="pla" />
			</view>
			<view>
				<button class="search-ss" @click="search">
					搜索
				</button>
			</view>
		</view>

		<view class="fourth">
			<view class="remen">
				<image class="rimg" src="../../static/热门.png" white-space></image>
				<text class="rgame">热门游戏</text>
			</view>
			<view class="more">
				更多 >
			</view>
		</view>
		
		<view class="fifth">
			<swiper class="fifth-caidan" indicator-dots="true">
				<swiper-item>
				<view class="fifth-T">
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/4.png"></image>
							</view>
							<text class="qtz">optimus</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/4.png"></image>
							</view>
							<text class="qtz">optimus</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/4.png"></image>
							</view>
							<text class="qtz">optimus</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/4.png"></image>
							</view>
							<text class="qtz">optimus</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/4.png"></image>
							</view>
							<text class="qtz">optimus</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/4.png"></image>
							</view>
							<text class="qtz">optimus</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/4.png"></image>
							</view>
							<text class="qtz">optimus</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/4.png"></image>
							</view>
							<text class="qtz">optimus</text>
						</navigator>
					</view>
				</view>
				</swiper-item>
				<swiper-item>
				<view class="fifth-T">
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/1.png"></image>
							</view>
							<text class="qtz">iron man</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/1.png"></image>
							</view>
							<text class="qtz">iron man</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/1.png"></image>
							</view>
							<text class="qtz">iron man</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/1.png"></image>
							</view>
							<text class="qtz">iron man</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/1.png"></image>
							</view>
							<text class="qtz">iron man</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/1.png"></image>
							</view>
							<text class="qtz">iron man</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/1.png"></image>
							</view>
							<text class="qtz">iron man</text>
						</navigator>
					</view>
					<view class="fifth-T-tuwen">
						<navigator url="/pages/bs/bs">
							<view class="fifth-T-tuwen_yp">
								<image src="/static/1.png"></image>
							</view>
							<text class="qtz">iron man</text>
						</navigator>
					</view>
				</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="tj">
			<text class="tj_tj">为您推荐</text>
		</view>
		
		<view class="sixth">
			<view class="sixth-tj">
				<view class="sixth-tj_zh">
					<view class="tutu"><image class="sixth-tj_zh_tu" src="../../static/5.png"></image></view>
					
					<view class="sixth-tj_zh_zi">
						<text class="sixth-tj_zh_TD">测试测试：打包打包打包完蛋打打看监控点把我的赛诺菲就开始你付款司法解释你付款上单呢福克斯</text>
						<text class="sixth-tj_zh_mn">￥ 99999</text>
					</view>
				</view>
			</view>
			<view class="sixth-tj">
				<view class="sixth-tj_zh">
					<view class="tutu"><image class="sixth-tj_zh_tu" src="../../static/5.png"></image></view>
					
					<view class="sixth-tj_zh_zi">
						<text class="sixth-tj_zh_TD">测试测试：关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</text>
						<text class="sixth-tj_zh_mn">￥ 99999</text>
					</view>
				</view>
			</view>
			<view class="sixth-tj">
				<view class="sixth-tj_zh">
					<view class="tutu"><image class="sixth-tj_zh_tu" src="../../static/5.png"></image></view>
					
					<view class="sixth-tj_zh_zi">
						<text class="sixth-tj_zh_TD">测试测试：关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</text>
						<text class="sixth-tj_zh_mn">￥ 99999</text>
					</view>
				</view>
			</view>
			<view class="sixth-tj">
				<view class="sixth-tj_zh">
					<view class="tutu"><image class="sixth-tj_zh_tu" src="../../static/5.png"></image></view>
					
					<view class="sixth-tj_zh_zi">
						<text class="sixth-tj_zh_TD">测试测试：关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</text>
						<text class="sixth-tj_zh_mn">￥ 99999</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				
				swipers: [

					'/static/2.png',
					'/static/3.png'
				]

			}
		},
		onLoad() {

		},
		
		methods: {
			

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f4f4f4;
	}
	.tj{
		// background-color: #ffffff ;
		width: 100%;
		
		margin-top: 20rpx;
		margin-left: 20rpx;
		.tj_tj{
			font-size: 35rpx;
			font-weight: 500;
		}
	}
	
	.sixth{
		// background-color: #ffffff ;
		margin-top: 20rpx;
		.sixth-tj{
			background-color: #ffffff ;
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			
			margin-top: 20rpx;
			
			.sixth-tj_zh{
				
				display: flex;
				.sixth-tj_zh_tu{
					width: 150rpx;
					height: 150rpx;
					// float: left;
				}
				.sixth-tj_zh_zi{
					margin-left: 40rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.sixth-tj_zh_TD{
						// text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						font-size: 23rpx;
						
					}
					.sixth-tj_zh_mn{
						display: flex;
						justify-content: end;
						padding-right: 20rpx;
						color: red;
						font-size: 35rpx;
						
					}
					
				}
			}
		}
	}

	.fifth{
		background-color: #ffffff ;
		margin-top: 30rpx;
		width: 100%;
		height: 380rpx;
		display: flex;
		align-items: center;
		.fifth-caidan{
			width: 100%;
			height: 85%;
		

		
			
			.fifth-T{
				
				display: grid;
				grid-template-columns: auto auto auto auto;
				grid-template-rows: auto auto auto auto;
				grid-row-gap: 10rpx;
				.fifth-T-tuwen{
					display: flex;
					justify-content: center;
					.qtz{	
						font-size: 25rpx;
					}
					.fifth-T-tuwen_yp{
						display: flex;
						justify-content: center;
						image{
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
			}
		}
	}
	
	.fourth {
		// background-color: #ffffff ;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		.more{
			font-size: 20rpx;
			display: flex;
			align-items: center;
			padding-right: 10rpx;
			white-space: nowrap;
		}

		.remen {
			padding-left: 10rpx;
			height: 50rpx;
			width: 100%;

			.rgame {
				font-size: 35rpx;
				margin-left: 5rpx;
				font-weight: 500;
			}

			.rimg {
				width: 50rpx;
				height: 50rpx;
				float: left;

			}

			
		}

	}

	.ssk {
		background-color: #ffffff ;
		margin-top: 20rpx;
		display: flex;
		width: 100%;
		height:70rpx;

		.search {
			
			
			display: flex;
			align-items: center;
			flex: 3;
			border: 3rpx solid black;
			.pla{
				font-size: 30rpx;
				padding-left: 20rpx;
				height: 100%;
				display: flex;
				align-items: center;
			}

			.search-shuru {
				width: 100%;
				height: 100%;
			}
		}

		.search-ss {
			flex: 1;
			border-radius: 0%;
			background-color: black;
			color: white;
			font-size: 20rpx;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			
			
		}

	}

	.lunbotu {
		background-color: #ffffff ;
		margin-top: 20rpx;

		.lunbotu- {
			height: 300rpx;
			// width: 90%;

			image {
				width: 100%;
				height: 100%;
			}
		}


	}

	.first {
		background-color: #ffffff ;
		// top:0rpx;
		display: flex;
		justify-content: space-between;

		.xuanhao {
			padding-left: 20rpx;

			.xuanhao- {
				font-size: 38rpx;
			}
		}

		.kefu {
			
			padding-right: 20rpx;
		}
	}
</style>
